<template>
	<view style="background-color: #f7f7f7;">
		<view class="item" v-for="(item,index) in list" :key="item.id" @click="goDetail(item)">
			<view class="img">
				<uv-image :src="item.imageUrl" width="100px" height="80px"></uv-image>
			</view>
			<view class="info" style="position: relative;">
				<view class="title">
					{{item.title}}
				</view>
				<view class="desc">
					Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore expedita, est cum qui, aperiam
					voluptate earum pariatur id reprehenderit quas ad dolore harum facere commodi perferendis non
					dolorem? Vero, iure.
				</view>
				<view class="tag">
					{{item.isHot==1 ?'热门':''}}
				</view>
				<view class="icon">
					<uv-icon name="account"></uv-icon>{{item.viewNumber}}
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	const props = defineProps({
		list: {
			type: Array,
		}
	})
	// 跳转到详情页面
	const goDetail = (item)=>{
		uni.navigateTo({
			url:`/pages/tabbar/mine/page/course/courseDetail?id=${item.id}`
		})
	}
	
	
</script>

<style lang="scss" scoped>
	.item {
		padding: 20rpx;
		display: flex;
		position: relative;
		background-color: #fff;
		margin-bottom: 20rpx;

		.img {
			margin-right: 20rpx;
		}

		.title {
			font-size: 30rpx;
			font-weight: 700;
			overflow: hidden;
			text-overflow: ellipsis;
			text-wrap: nowrap;
			width: 400rpx;
		}

		.desc {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			width: 450rpx;
			/* 限制显示的行数 */
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 12rpx;
			color: #666;
		}

		.tag {
			font-size: 20rpx;
			font-weight: 700;
			color: red;
			position: absolute;
			bottom: 0rpx;
		}

		.icon {
			position: absolute;
			display: flex;
			color: #909399;
			font-size: 20rpx;
			bottom: 0rpx;
			right: 0rpx
		}
	}
</style>